import React from 'react';
import type { BadgeProps, CalendarProps } from 'antd';
import { Badge, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';
import './Calendar.css';

const getListData = (value: Dayjs) => {
    let listData: { type: string; content: string; url: string }[] = [];
    switch (value.date()) {
        case 1:
            listData = [
                { type: 'success', content: '九月你好', url: 'http://store.eqxiu.com/moban/9yuenihao-97041.html' },
                { type: 'warning', content: '开学季', url: 'http://store.eqxiu.com/moban/kaixueji-97041.html' }
            ];
            break;
        case 3:
            listData = [
                { type: 'warning', content: '中国人民抗日战争胜利纪念日', url: 'http://store.eqxiu.com/moban?keywords=%E4%B8%AD%E5%9B%BD%E4%BA%BA%E6%B0%91%E6%8A%97%E6%97%A5%E6%88%98%E4%BA%89%E8%83%9C%E5%88%A9%E7%BA%AA%E5%BF%B5%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 5:
            listData = [
                { type: 'warning', content: '国际慈善日', url: 'http://store.eqxiu.com/moban?keywords=%E5%9B%BD%E9%99%85%E6%85%88%E5%96%84%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 7:
            listData = [
                { type: 'success', content: '白露', url: 'http://store.eqxiu.com/moban/bailu-97041.html' }
            ];
            break;
        case 8:
            listData = [
                { type: 'warning', content: '国际新闻工作者日', url: 'http://store.eqxiu.com/moban/guojixinwengongzuozheri-97041.html' },
                { type: 'warning', content: '国际扫盲日', url: 'http://store.eqxiu.com/moban/guojisaomangri-97041.html' },
            ];
            break;
        case 10:
            listData = [
                { type: 'success', content: '教师节', url: 'http://store.eqxiu.com/moban/jiaoshijie-97041.html' }
            ];
            break;
        case 14:
            listData = [
                { type: 'success', content: '音乐情人节', url: 'http://store.eqxiu.com/moban?keywords=%E9%9F%B3%E4%B9%90%E6%83%85%E4%BA%BA%E8%8A%82&searchCode=97041' }
            ];
            break;
        case 15:
            listData = [
                { type: 'warning', content: '世界清洁地球日', url: 'http://store.eqxiu.com/moban?keywords=%E4%B8%96%E7%95%8C%E6%B8%85%E6%B4%81%E5%9C%B0%E7%90%83%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 17:
            listData = [
                { type: 'error', content: '中秋节', url: 'http://store.eqxiu.com/moban/zhongqiujie-97041.html' }
            ];
            break;
        case 18:
            listData = [
                { type: 'warning', content: '918事变93周年.', url: 'http://store.eqxiu.com/moban?keywords=918%E4%BA%8B%E5%8F%9893%E5%91%A8%E5%B9%B4&searchCode=97041' }
            ];
            break;
        case 20:
            listData = [
                { type: 'warning', content: '全国爱牙日', url: 'http://store.eqxiu.com/moban?keywords=%E5%85%A8%E5%9B%BD%E7%88%B1%E7%89%99%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 21:
            listData = [
                { type: 'warning', content: '世界和平日', url: 'http://store.eqxiu.com/moban?keywords=%E4%B8%96%E7%95%8C%E5%92%8C%E5%B9%B3%E6%97%A5&searchCode=97041' },
                { type: 'warning', content: '全民国防教育日', url: 'http://store.eqxiu.com/moban?keywords=%E5%9B%BD%E9%98%B2%E6%95%99%E8%82%B2%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 22:
            listData = [
                { type: 'success', content: '秋分', url: 'http://store.eqxiu.com/moban/qiufen-97041.html' }
            ];
            break;
        case 26:
            listData = [
                { type: 'warning', content: '世界避孕日', url: 'http://store.eqxiu.com/moban?keywords=%E4%B8%96%E7%95%8C%E9%81%BF%E5%AD%95%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 27:
            listData = [
                { type: 'warning', content: '世界旅游日', url: 'http://store.eqxiu.com/moban/shijiel%C3%BCyouri-97041.html' }
            ];
            break;
        case 28:
            listData = [
                { type: 'warning', content: '孔子文化节', url: 'http://store.eqxiu.com/moban/kongziwenhuajie-97041.html' },
                { type: 'warning', content: '世界狂犬病日', url: 'http://store.eqxiu.com/moban?keywords=%E4%B8%96%E7%95%8C%E7%8B%82%E7%8A%AC%E7%97%85%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 29:
            listData = [
                { type: 'warning', content: '世界心脏日', url: 'http://store.eqxiu.com/moban?keywords=%E4%B8%96%E7%95%8C%E5%BF%83%E8%84%8F%E6%97%A5&searchCode=97041' }
            ];
            break;
        case 30:
            listData = [
                { type: 'warning', content: '中国烈士纪念日', url: 'http://store.eqxiu.com/moban?keywords=%E4%B8%AD%E5%9B%BD%E7%83%88%E5%A3%AB%E7%BA%AA%E5%BF%B5%E6%97%A5&searchCode=97041' }
            ];
            break;
        default:
    }
    return listData || [];
};

const getMonthData = (value: Dayjs) => {
    if (value.month() === 8) {
        return 1394;
    }
};

const App: React.FC = () => {
    const monthCellRender = (value: Dayjs) => {
        const num = getMonthData(value);
        return num ? (
            <div className="notes-month">
                <section>{num}</section>
                <span>Backlog number</span>
            </div>
        ) : null;
    };

    const dateCellRender = (value: Dayjs) => {
        const listData = getListData(value);
        return (
            <ul className="events">
                {listData.map((item) => (
                    <li key={item.content} className="event-item">
                        <a
                            href={item.url}
                            className="event-link"
                            target="_blank"
                            rel="noopener noreferrer">
                            <Badge status={item.type as BadgeProps['status']} text={item.content} />
                        </a>
                    </li>
                ))}
            </ul>
        );
    };

    const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
        if (info.type === 'date') return dateCellRender(current);
        if (info.type === 'month') return monthCellRender(current);
        return info.originNode;
    };

    return (
        <div>
            <Calendar
                cellRender={cellRender}
                mode="month"  // 只显示一个月的日期
                style={{ width: '800px', height: '600px' }}
                fullscreen={false} // 禁用全屏
            />
        </div>
    );
};

export default App;
